import React, { useEffect, useState } from 'react'
import { SearchBar, Grid } from 'antd-mobile'
import Lunbo from '../../components/lunbo'
import { useNavigate } from 'react-router-dom'
import { listApi } from '../../api'
import { InfiniteScroll } from 'antd-mobile'
function Shouye() {
  let navigate=useNavigate()
  const newArr = Array.from({ length: 10 }).map(() => {
    return {
      img: 'https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1741280400&t=dc1af27de223b4b28a7d4acc05d6ecb3',
      title: "酒店"
    }
  })
  const [data,setData]=useState([])
  const [page,setPage]=useState(1)

  const getData=async()=>{
    const resp=await listApi(data)
    console.log(resp.data.data)

    setData(data.concat(resp.data.data))
    setPage(page+1)
  }
  useEffect(()=>{
    getData()
  },[])

  return (
    <div>
      {/* 搜索框 */}
      <SearchBar placeholder='BOSS直播爆款' onFocus={()=>navigate('/home/search')}></SearchBar>
      <div>
        {/* 菜单 */}
        <Grid columns={5}>
          {
            newArr.map((v, i) => {
              return (
                <Grid.Item key={i} style={{display:"flex",alignItems:'center'}} onClick={()=>navigate('/home/jiudianList')} >
                  <img src={v.img} alt="" style={{height:"50px"}}/>
                  <p>{v.title}</p>
                </Grid.Item>
              )

            })
          }
        </Grid>
        {/* 轮播图 */}
        <Lunbo></Lunbo>
        {/* 列表渲染 */}
        {
          data.map((v,i)=>{
            return <dl key={i} style={{display:"flex",alignItems:"center"}} onClick={()=>navigate('/home/detail',{state:v})}>
              <dt style={{height:"200px"}}>
                <img src={v.image} alt="" height={200}/>
              </dt>
              <dd>
                <h3>{v.title}</h3>
                <p>{v.price}</p>
                <span>{v.date}</span>
              </dd>
            </dl>
          })
        }
      </div>
      <InfiniteScroll loadMore={getData} hasMore={true}></InfiniteScroll>
    </div>
  )
}

export default Shouye
